<template>
  <view class="evaluate">
    <view class="tabs">
      <view
        class="tab-item"
        :class="{ active: currentKey == 0 }"
        @click="handleChangeTab(0)"
        >待评价</view
      >
      <view
        class="tab-item"
        :class="{ active: currentKey == 1 }"
        @click="handleChangeTab(1)"
        >已评价</view
      >
    </view>
    <view class="evaluate-list">
      <view
        class="evaluate-item"
        v-for="(item, index) in list">
        <view class="evaluate-item-date">{{ item.settleAt }}</view>
        <evaluateItem
          :eData="item"
          @submit="handleSubmit" />
      </view>
    </view>
    <view class="footer">
      <u-empty
        text="列表为空"
        class="kong"
        mode="list"
        v-if="list.length === 0"></u-empty>
      <u-loadmore
        v-if="list.length"
        :status="loadStatus">
      </u-loadmore>
    </view>
    <u-modal
      v-model="modalShow"
      :mask-close-able="true"
      :show-title="false"
      :showConfirmButton="false">
      <view class="modal-content">
        <view class="modal-title">评价货主</view>
        <image
          class="modal-avatar"
          src="../../static/my/avatar.png"></image>
        <view class="modal-rate"
          >综合评分：{{ modalData.shipperEvaluate }}</view
        >
        <view class="modal-name"
          >{{ modalData.corpName
          }}<text style="margin-left: 20rpx">{{
            modalData.shipperName
          }}</text></view
        >
        <view class="rate-list">
          <view
            class="rate-item"
            v-for="(item, index) in rateList">
            <view class="rate-title">
              {{ item.title }}
            </view>
            <view class="rate-content">
              <u-rate
                active-color="#FADB14"
                size="40"
                gutter="8"
                v-model="item.value"></u-rate>
            </view>
            <view class="rate-value"> {{ item.value }} 星 </view>
          </view>
        </view>
      </view>
      <view
        style="
          display: flex;
          justify-content: space-around;
          padding-bottom: 20rpx;
        ">
        <u-button
          type="primary"
          shape="circle"
          plain
          style="width: 224rpx"
          @click="handleCancel"
          throttle-time="0"
          >取消
        </u-button>
        <u-button
          type="primary"
          shape="circle"
          style="width: 224rpx"
          @click="handleEvaluate"
          throttle-time="0">
          确定
        </u-button>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { d_resNull } from 'common/util.js'
import evaluateItem from './evaluateItem.vue'
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      currentKey: 0,
      list: [],
      taglistShow: true, //存是否还有值
      loadStatus: 'loadmore',
      eId: '',
      modalShow: false,
      rateList: [
        { title: '运费结算：', value: 0 },
        { title: '卸货服务：', value: 0 },
        { title: '服务质量：', value: 0 },
        { title: '满意度：', value: 0 },
        { title: '总体评价：', value: 0 }
      ],
      modalData: {}
    }
  },
  components: {
    evaluateItem
  },
  onReachBottom() {
    if (this.taglistShow) {
      this.showLoading()
      this.loadStatus = 'loading'
      setTimeout(() => {
        this.pageNum++
        uni.stopPullDownRefresh()
        this.getList()
        this.loadStatus = 'nomore'
      }, 1000)
    } else {
      this.loadStatus = 'nomore'
    }
  },
  // 强制下拉刷新
  onPullDownRefresh() {
    this.pageNum = 1
    this.pageSize = 10
    // this.showLoading()
    setTimeout(() => {
      uni.stopPullDownRefresh()
      this.hideLoading()
      this.getList()
    }, 1000)
  },
  methods: {
    callPhone(phone) {
      uni.makePhoneCall({
        phoneNumber: phone
      })
    },
    handleSubmit(data) {
      this.eId = data.evaluateId
      this.modalShow = true
      this.modalData = data
    },
    handleCancel() {
      this.modalShow = false
    },
    async handleEvaluate() {
      if (!this.rateList[0].value) return this.$api.msg('请评价运费结算')
      if (!this.rateList[1].value) return this.$api.msg('请评价卸货服务')
      if (!this.rateList[2].value) return this.$api.msg('请评价服务质量')
      if (!this.rateList[3].value) return this.$api.msg('请评价满意度')
      if (!this.rateList[4].value) return this.$api.msg('请评价总体评价')
      const data = {
        evaluateId: this.eId,
        evaluateType: 1,
        efficiency: this.rateList[0].value,
        safety: this.rateList[1].value,
        quality: this.rateList[2].value,
        satisfy: this.rateList[3].value,
        total: this.rateList[4].value
      }
      const { result, code } = await this.$u.post(
        '/freight-business/evaluate/driver/evaluateConfirm',
        data
      )
      if (code == '0') {
        this.modalShow = false
        this.$api.msg('评价成功！')
        this.pageNum = 1
        this.getList()
      }
    },
    showLoading() {
      uni.showLoading({
        title: '加载中'
      })
    },
    hideLoading() {
      uni.hideLoading()
    },
    handleChangeTab(index) {
      this.currentKey = index
      this.pageNum = 1
      this.getList()
    },
    async getList() {
      const { result, code } = await this.$u.get(
        '/freight-business/evaluate/driver/app/evaluatePage',
        {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          isEvaluate: this.currentKey
        }
      )
      if (code == '0') {
        this.hideLoading()
        this.taglistShow = result.records.length ? true : false
        this.loadStatus =
          result.records.length < this.pageSize ? 'nomore' : 'loadmore'
        result.records.forEach((item) => {
          item.loadPlaceSplit = JSON.parse(item.loadPlaceSplit)
          item.targetPlaceSplit = JSON.parse(item.targetPlaceSplit)
        })
        if (this.pageNum == 1) {
          this.list = result.records
        } else {
          this.list = this.list.concat(d_resNull(result.records))
        }
      } else {
        this.hideLoading()
        this.$api.msg(message)
      }
    }
  },
  onLoad() {},
  onShow() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.evaluate {
  min-height: 100vh;
  background: #f6f6f6;
}

.evaluate-list {
  padding: 0 30rpx;
}
.evaluate-item {
  margin-bottom: 30rpx;
}
.evaluate-item-date {
  width: fit-content;
  padding: 0 15rpx;
  line-height: 32rpx;
  height: 32rpx;
  background: #e8e8e8;
  border-radius: 4rpx;
  margin: 24rpx auto;
  font-size: 24rpx;
  color: #999999;
}

.evaluate-item-content {
  width: 100%;
  background: #ffffff;
  border-radius: 10rpx;
}

.evaluate-item-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 22rpx 22rpx 0 22rpx;
}

.evaluate-item-icon {
  width: 42rpx;
  height: 42rpx;
  background: #3399ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;

  image {
    width: 24rpx;
    height: 24rpx;
  }
}

.evaluate-item-area {
  font-size: 24rpx;
  color: #999999;
  line-height: 33rpx;
  padding: 0 22rpx 22rpx;
}

.btns {
  width: 100%;
  height: 66rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid #f0f2f5;
}

.btn-1 {
  width: 104rpx;
  height: 48rpx;
  border-radius: 8rpx;
  border: 2rpx solid #3399ff;
  font-size: 24rpx;
  color: #3399ff;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-2 {
  width: 80rpx;
  height: 48rpx;
  background: #387cf9;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #fff;
  text-align: center;
  line-height: 48rpx;
  margin-left: 10rpx;
  margin-right: 20rpx;
}

.tabs {
  width: 100%;
  height: 90rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
}

.tab-item {
  position: relative;
  width: 50%;
  height: 100%;
  font-size: 28rpx;
  color: #333333;
  line-height: 90rpx;
  text-align: center;

  &.active {
    color: #3399ff;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0 auto;
      width: 188rpx;
      height: 4rpx;
      background: #6190e8;
      border-radius: 2rpx;
    }
  }
}
.footer {
  padding: 30rpx 0;
}

.modal-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 22rpx;
}
.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  line-height: 40rpx;
  margin-bottom: 16rpx;
  margin-top: 20rpx;
}
.modal-avatar {
  width: 58rpx;
  height: 58rpx;
  border-radius: 50%;
  margin-bottom: 8rpx;
}
.modal-rate {
  font-size: 24rpx;
  font-weight: 500;
  color: #949699;
  line-height: 33rpx;
  margin-bottom: 16rpx;
}
.modal-name {
  font-size: 24rpx;
  font-weight: 500;
  color: #949699;
  line-height: 33rpx;
  margin-bottom: 32rpx;
}
.modal-car {
  display: flex;
  align-items: center;
  margin-bottom: 22rpx;
  &-num {
    font-size: 28rpx;
    font-weight: 600;
    color: #000000;
    line-height: 28rpx;
    margin-right: 8rpx;
  }
}
.modal-car-card {
  display: flex;
  .tag {
    min-width: 66rpx;
    height: 32rpx;
    line-height: 32rpx;
    border-radius: 10%;
    color: white;
    text-align: center;
    font-size: 24rpx;
  }
}
.rate-item {
  display: flex;
  align-items: center;
  margin-bottom: 22rpx;
}
.rate-title {
  width: 140rpx;
  height: 28rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #000000;
  line-height: 28rpx;
  white-space: nowrap;
}
.rate-value {
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  line-height: 22rpx;
  margin-left: 22rpx;
}
</style>
